<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="top" v-if="[2,5].indexOf(steps)<0">
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">1</view>
                <text class="steps-text">实名信息</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" :style="{borderColor:steps<3?'#cccccc':''}"/>
                <view class="steps" :style="{background:steps<3?'#cccccc':''}">2</view>
                <text class="steps-text" style="color: #cccccc">绑定银行卡</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color: #cccccc"/>
                <view class="steps" style="background: #cccccc">3</view>
                <text class="steps-text" style="color: #cccccc">开户成功</text>
            </view>
        </view>
        <view class="bottom-zero" v-if="steps==0">
            <view class="steps-text">开通工行账户 请准备以下资料</view>
            <view class="img-wrap">
                <view style="width: 50%">
                    <image mode="widthFix" class="bottom-img" src="/static/img/idHead.png"></image>
                    <view class="steps-text">身份证</view>
                    <view class="steps-text" style="color: #E8E8E8">上传身份证正反面信息</view>
                </view>
                <view style="width: 50%">
                    <image mode="widthFix" class="bottom-img" src="/static/img/debitCard.png"></image>
                    <view class="steps-text">借记卡</view>
                    <view class="steps-text" style="color: #E8E8E8">绑定借记卡</view>
                </view>
            </view>
        </view>
        <view class="bottom-one" v-if="steps==1">
            <view class="input-wrap">
                <text class="input-key">姓名</text>
                <input v-model="name" type="number" maxlength="10" placeholder="请输入姓名"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">身份证号</text>
                <input v-model="idCard"  maxlength="18" placeholder="请输入身份证号"/>
            </view>
        </view>
        <view class="bottom-two" v-if="steps==2">
            <view class="steps-text" style="line-height: 100upx">请上传本人身份证照片</view>
            <image mode="scaleToFill" :style="{width: width*0.7+'px',height:width*0.7*168.86/262.5+'px'}"
                   @click="chooseImage(0)" :src="headImg" alt=""></image>
            <image mode="scaleToFill" :style="{width: width*0.7+'px',height:width*0.7*168.86/262.5+'px'}"
                   @click="chooseImage(1)" :src="emblemImg" alt=""></image>
            <image mode="widthFix" style="width: 100%;margin-top: 40upx" @click="chooseImage" src="/static/img/upHint.png" alt=""></image>
        </view>
        <view class="bottom-one" v-if="steps==3">
            <view class="input-wrap">
                <text class="input-key">开户行</text>
                <text @click="showBank(true)" class="bank-value"
                      :style="{color:bank=='请选择开户行'?'#7f7f7f':'#5e93c6'}">{{bank}}
                    </text>
            </view>
<!--            <text style="color:#7f7f7f">》</text>-->
            <view class="input-wrap">
                <text class="input-key">银行卡号</text>
                <input v-model="bankCard" type="number" maxlength="19" placeholder="请输入银行卡号"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">预留手机号</text>
                <input v-model="phone" type="number" maxlength="19" placeholder="请输入预留手机号"/>
            </view>
        </view>
        <view v-if="steps==3" class="input-key" style="padding-left:3%;margin:20upx 0;font-size:28upx;line-height: 32upx">温馨提示:请确保手机号为对应储蓄卡的柜面预留手机号</view>
        <view class="input-wrap" style="border-top: 1px solid rgba(227, 227, 227, 1);background: white;margin-top: 40upx" v-if="steps==4">
            <input v-model="code" type="number" maxlength="6" style="text-align: left" placeholder="请输入验证码"/>
            <button type="warn" size="mini" class="code-button" :disabled="time!=60" @click="getCode">
                {{time==60?'获取验证码':time+'s后重试'}}
            </button>
        </view>
        <image v-if="steps==5" style="margin:100upx 0 0 calc(50% - 25upx);width: 50upx;height: 50upx" src="/static/logo.png"></image>
        <view v-if="steps==5" class="steps-text" style="margin-bottom:100upx;text-align:center;color: #B0B0B0">诚e金账户开通成功</view>
        <button type="warn" class="sub-button" @click="next">
            {{buttonText[steps]}}
        </button>
        <button type="warn" v-if="steps==5" class="sub-button" @click="goBank">
            返回我的账户
        </button>
        <uni-popup :show="starTimeVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="身份证签发日期">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="svalue" @change="bindStartChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in syears" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in smonths" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in sdays" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
            <view   class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="starTimeOk">
                确定
            </view>
            <view   class="pick-button" @click="showStart(false)">
                取消
            </view>
        </uni-popup>
        <uni-popup :show="timeVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="身份证有效期截止日期">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="value" @change="bindChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
            <view>
                <radio-group  @click="changeForever">
                    <radio style="transform:scale(0.6);font-size: 40upx;margin-left: -60upx"  :checked="forever" color="#D14F43" >长期(若有效期日期为长期，请勾选)</radio>
                </radio-group>
            </view>
            <view   class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="timeOk">
               确定
            </view>
            <view   class="pick-button" @click="showPopup(false)">
                取消
            </view>
        </uni-popup>
        <uni-popup :show="bankVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="选择银行">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="valueBank" @change="bankChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in banks" :key="index">{{item}}</view>
                </picker-view-column>
            </picker-view>
            <view class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="bankOk">
                确定
            </view>
            <view class="pick-button" @click="showBank(false)">
                取消
            </view>
            <view class="safety"/>
        </uni-popup>

    </view>
</template>

<script>
    import API from '../../common/api.js';
    import uniPopup from "@/components/uni-popup/uni-popup.vue"
    var sourceType = [
        ['camera'],
        ['album'],
        ['camera', 'album']
    ]
    var sizeType = [
        ['compressed'],
        ['original'],
        ['compressed', 'original']
    ]
    export default {
        components: {uniPopup},
        data() {
            const years = []
            const months = []
            const days1 = []
            const days2 = []
            const days3 = []
            const days4 = []
            const syears = []
            const smonths = []
            const sdays1 = []
            const sdays2 = []
            const sdays3 = []
            const sdays4 = []
            for (let i = 1970; i <= 2049; i++) {
                syears.push(i)
            }
            for (let i = 2019; i <= 2099; i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
                smonths.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days4.push(i)
                i<31?days1.push(i):''
                i<30?days2.push(i):''
                i<29?days3.push(i):''

                sdays4.push(i)
                i<31?sdays1.push(i):''
                i<30?sdays2.push(i):''
                i<29?sdays3.push(i):''
            }
            return {
                steps:2,
                width: uni.getSystemInfoSync().windowWidth,
                buttonText:['准备好了','下一步','确认上传','确定','提交','缴纳诚e金'],
                sourceTypeIndex: 2,
                sizeTypeIndex: 2,
                sourceType: ['拍照', '相册', '拍照或相册'],
                sizeType: ['压缩', '原图', '压缩或原图'],
                starTimeVisible:false,
                timeVisible:false,
                bankVisible:false,
                height: '',
                name:'',
                idCard:'',
                headImg:'/static/img/upHead.png',
                emblemImg:'/static/img/upCountry.png',
                forever:false,
                banks:['中国工商银行'],
                bank:'中国工商银行',//'请选择开户行',
                bankTemp:'',
                years,
                year:0,
                months,
                month:0,
                days1,
                days2,
                days3,
                days4,
                days:days1,
                day:0,
                value:[],


                syears,
                syear:0,
                smonths,
                smonth:0,
                sdays1,
                sdays2,
                sdays3,
                sdays4,
                sdays:days1,
                sday:0,
                svalue:[],


                valueBank:[],
                indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
                bankCard:'',
                phone:'',
                code:'',
                time:60,
                timer:null,
            }
        },
        onLoad() {
            this.bankTemp=this.banks[0]
            uni.getSystemInfo('windowHeight').then(r => {
                this.height = r[1].windowHeight
            })
        },
        methods: {
            changeForever(){
             this.forever=!this.forever
            },
            next(){
                if(this.steps==1){
                    if(!this.name){
                        uni.showModal({
                            title: '提示',
                            content: '请输入您的姓名',
                            showCancel: false,
                        });
                        return
                    }
                    if(!this.idCard){
                        uni.showModal({
                            title: '提示',
                            content: '请输入您的身份证号',
                            showCancel: false,
                        });
                        return
                    }
                    if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard))) {
                        uni.showModal({
                            title: '提示',
                            content: '请输入正确的身份证',
                            showCancel: false,
                        });
                        return
                    }
                    this.steps++
                }else if(this.steps==2){
                    // if(this.headImg=='/static/img/upHead.png'){
                    //     uni.showToast({
                    //         title: '请上传人像页照片',
                    //         icon: 'none',
                    //         duration: 2000
                    //     });
                    //     return
                    // }
                    // if(this.emblemImg=='/static/img/upCountry.png'){
                    //     uni.showToast({
                    //         title: '请上传国徽页照片',
                    //         icon: 'none',
                    //         duration: 2000
                    //     });
                    //     return
                    // }
                    this.showStart(true)
                }else if(this.steps==3){
                    if(this.bank=='请选择开户行'){
                        uni.showModal({
                            title: '提示',
                            content: '请选择开户行',
                            showCancel: false,
                        });
                    }else if(!this.bank){
                        uni.showModal({
                            title: '提示',
                            content: '请输入银行卡号',
                            showCancel: false,
                        });
                    }else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                        uni.showModal({
                            title: '提示',
                            content: '请输入正确的手机号',
                            showCancel: false,
                        });
                    }else{
                        API.bankAccountOpen({
                            bindCard:this.bank,
                            idBackImage:this.emblemImg,
                            idCard:this.idCard,
                            idFrontImage:this.headImg,
                            mobile:this.phone,
                            token:uni.getStorageSync('token'),
                            trueName:this.name
                        }).then(res=>{

                        })
                        this.steps++
                    }
                }else if(this.steps==4){
                    //验证码提交
                    this.steps++
                }else{
                    this.steps++
                }
            },
            goBank(){
                uni.navigateBack()
            },
            onSubmit(){
                if(!this.name){
                    uni.showModal({
                        title: '提示',
                        content: '请输入姓名',
                        showCancel: false,
                    });
                    return
                }
                if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard))) {
                    uni.showModal({
                        title: '提示',
                        content: '请输入正确的身份证',
                        showCancel: false,
                    });
                    return
                }
            },
            //上传图片
            chooseImage: async function(num) {
                uni.chooseImage({
                    sourceType: sourceType[this.sourceTypeIndex],
                    sizeType: sizeType[this.sizeTypeIndex],
                    count: 1,
                    success: (res) => {
                        console.log(2)
                        this.urlTobase64Default(res.tempFilePaths[0],num);
                    }
                })
            },
            //得到base64--默认
            urlTobase64Default(url,num){
                wx.getFileSystemManager().readFile({
                    filePath: url, //选择图片返回的相对路径
                    encoding: 'base64', //编码格式
                    success: res => { //成功的回调
                        let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦
                        let params = {
                            base64Str: base64
                        }
                        API.base64Upload(params).then(res=>{
                            if(res.status==200){
                                num?this.emblemImg=res.data:this.headImg=res.data
                            }else{
                                uni.showModal({
                                    title: '提示',
                                    content: '上传失败，请重试',
                                    showCancel: false,
                                });
                            }
                            console.log(res,9999)
                        })
                        // util.ajax('file/base64Upload',params,(json) => {
                        //     uni.hideLoading();
                        //     if(json.data.status === 200){
                        //         json.data.data
                        //     }
                        // });
                    }
                })
            },
            showStart(flag){
                this.starTimeVisible=flag
            },
            showPopup(flag){
                if(flag){
                    const date = new Date()
                    const year = date.getFullYear()
                    const month = date.getMonth() + 1
                    const day = date.getDate()
                    this.year=year
                    this.month=month
                    this.day=day
                    this.value=[this.years-1, this.month - 1, this.day - 1]
                }
                this.timeVisible=flag
            },
            bindStartChange (e) {
                const val = e.detail.value
                this.syear = this.syears[val[0]]
                this.smonth = this.smonths[val[1]]
                this.sday = this.sdays[val[2]]
                if([1,3,5,7,8,10,12].indexOf(this.smonth)>-1){
                    this.sdays=this.sdays4
                }else if([4,6,9,11].indexOf(this.smonth)>-1){
                    this.sdays=this.sdays1
                }else if(this.year%4==0){
                    this.sdays=this.sdays2
                }else{
                    this.sdays=this.sdays3
                }
                console.log(this.syear,this.smonth,this.sday)
            },
            bindChange (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
                if([1,3,5,7,8,10,12].indexOf(this.month)>-1){
                    this.days=this.days4
                }else if([4,6,9,11].indexOf(this.month)>-1){
                    this.days=this.days1
                }else if(this.year%4==0){
                    this.days=this.days2
                }else{
                    this.days=this.days3
                }
                console.log(this.year,this.month,this.day)
            },
            starTimeOk(){
                const date = new Date()
                console.log(this.svalue[0],this.svalue[1],this.value[2])
                let selectDate=new Date(this.syear+'-'+this.smonth+'-'+this.sday+' 00:00:00')
                console.log(selectDate.getTime(),date.getTime())
                if(selectDate.getTime()>date.getTime()){
                    uni.showModal({
                        title: '提示',
                        content: '签发日期不能大于当前日期',
                        showCancel: false,
                    });
                }else{
                    this.starTimeVisible=false
                   this.showPopup(true)
                }
            },
            timeOk(){
                if(this.forever){
                    this.timeVisible=false
                    this.steps++
                }else{
                  const date = new Date()
                    console.log(this.value[0],this.value[1],this.value[2])
                  let selectDate=new Date(this.year+'-'+this.month+'-'+this.day+' 23:59:59')
                  if(this.year<=this.syear){
                      uni.showModal({
                          title: '提示',
                          content: '截止日期年份不能小于或等于签发日期年份',
                          showCancel: false,
                      });
                      return;
                  }
                  console.log(selectDate.getTime(),date.getTime())
                  if(selectDate.getTime()<date.getTime()){
                      uni.showModal({
                          title: '提示',
                          content: '请勿选择过去的日期',
                          showCancel: false,
                      });
                      return
                  }else{
                      this.timeVisible=false
                      this.steps++
                  }
              }
            },
            showBank(flag){
                // if(flag&&this.bank=='请选择开户行'){
                //     this.bank==this.banks[0]
                // }
                this.bankVisible=flag
            },
            bankChange(e){
                this.bankTemp=this.banks[e.detail.value[0]]
            },
            bankOk(){
                this.bank=this.bankTemp
                this.bankVisible=false
            },
            getCode(){
                this.timer=setInterval(()=>{
                    this.time--
                    if(!this.time){
                        this.time=60
                        clearInterval(this.timer)
                    }
                },1000)
            },
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }

    .top {
        width: 100%;
        height: 95upx;
        background: white;
        display: flex;
        padding-top: 25upx;
        justify-content: space-around;
    }
    .steps-wrap{
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 33.34%;
    }
    .steps-line{
        width: 33.34%;
        border-bottom: 2px solid #DC5C4B;
        position: absolute;
        margin-top: 25upx;
    }
    .steps {
        z-index:1;
        width: 50upx;
        height: 50upx;
        background: #DC5C4B;
        border-radius: 40upx;
        color: rgba(255, 255, 255, 1);
        font-size: 32upx;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .bottom-zero{
        width: 100%;
        height: 300upx;
        background: white;
        padding-top: 80upx;
        margin-top: 40upx;
        text-align: center;
    }
    .img-wrap{
        display: flex;
        justify-content: space-around;
        margin-top: 40upx;
    }
    .bottom-img{
        width: 40%;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .bottom-one{
        width: 100%;
        color: #647482;
        background: white;
        margin-top: 40upx;
        border-top: 1px solid rgba(227, 227, 227, 1);
    }
    .input-wrap{
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
        border-bottom: 1px solid rgba(227, 227, 227, 1);
    }
    .input-key{
        font-size: 32upx;
        color: #64727f;
        line-height: 112upx;
    }
    input{
        padding:30upx 0;
        color: #5e93c6;
        font-size: 28upx;
        text-align: right;
        font-family: PingFangSC-regular;
        display: inline-block;
    }
    .bottom-two{
        width: 100%;
        text-align: center;
    }
    .pick-time{
        /*background: red;*/
    }
    .pick-button{
        display: inline-block;
        width: 50%;
        border-top:1px solid #E8E8E8;
        border-bottom:1px solid #E8E8E8;

    }
    .bank-value{
        font-size: 28upx;
        line-height: 112upx;
        margin-right: -2%;
    }
    .code-button{
        position: absolute;
        margin-top: 24upx;
        right: 5%;
        border-radius:120upx;
        z-index: 100;
    }
    .safety{
        width:100%;
        height: constant(safe-area-inset-bottom);
        height:env(safe-area-inset-bottom);
    }
</style>
